<!-- 数据项类别 -->
<template>
  <MainSlot v-loading="loading">
    <template v-slot:table>
      <el-row class="h100p" :gutter="15">
        <el-col class="h100p" :span="12">
          <DataType :title="'已配置数据类型'" :configuredFlag="'configured'" :labelKey="'dataTypeName'"
            :backgroundColor="'#4381b5'" @delDataTypeData="delDataTypeData" @addDataType="addDataType"
            :data="existenceList"></DataType>
        </el-col>
        <el-col class="h100p" :span="12">
          <DataType :title="'未配置数据类型'" :configuredFlag="'notConfigured'" :data="noExistenceList"
            :labelKey="'dataTypeName'" :backgroundColor="'#7492ab'" :isOpenSelect="false" @addDataType="addDataType">
          </DataType>
        </el-col>
      </el-row>
    </template>
    <template v-slot:dialogModule>
      <AddEdit :title="'数据项'" @closeDialog="closeDialog" :addEditFlag="addEditFlag" :dialogVisible="dialogVisible"
        :data="formData">
      </AddEdit>
    </template>
  </MainSlot>
</template>
<script>
import MainSlot from "@/components/MainSlot";
import Pagination from '@/components/Pagination';
import TableData from '@/components/TableData';
import BtnSlot from '@/components/BtnSlot';
import AddEdit from './components/addEdit.vue';
import DataType from './components/dataType.vue';
import MenuEquipment from '@/components/NavMenu/menu_equipment.vue';
import dataClassManagement from '@/api/basicInformation/dataClassManagement'


export default {
  components: { MainSlot, Pagination, TableData, BtnSlot, AddEdit, MenuEquipment, DataType },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      addEditFlag: 'add',
      formData: {},
      btnList: ['add', 'delete'],
      existenceList: [],
      noExistenceList: []

    }
  },
  mounted() {
    this.queryNOExistence();
    this.queryExistence()
  },
  methods: {
    async queryConfig(id) {
      let { data } = await dataClassManagement.queryConfig(id);
      return data || {}
    },
    async queryNOExistence() {
      let { data } = await dataClassManagement.getnohasconfig();
      console.log('未配置数据项', data);
      this.noExistenceList = data || [];
    },
    async queryExistence() {
      let { data } = await dataClassManagement.gethasconfig();
      console.log('已配置数据项', data);
      this.existenceList = data || [];
    },
    addDataType(data) {
      if (data.configuredFlag == 'configured') {
        this.addEditFlag = 'edit';
      } else if (data.configuredFlag == 'notConfigured') {
        this.addEditFlag = 'add';
        this.queryConfig(data.dataTypeId)
        data = { ...data, ...this.queryConfig(data.dataTypeId) }
      }
      this.formData = JSON.parse(JSON.stringify(data));
      this.dialogVisible = true;
    },
    //删除已配置
    delDataTypeData(list) {
      this.delList(list)
    },
    delList(deleteList = [], key = 'dataTypeConfigId') {
      let list = []
      deleteList.forEach(item => {
        list.push(item[key])
      })
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await dataClassManagement.delList(list);
        if (res.code == 1) {
          this.$message.success(res.msg || '删除成功');
          this.queryNOExistence();
          this.queryExistence()
        } else {
          this.$message.warning(res.msg || '删除失败');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getMenuData(data) {
      console.log(data)
    },
    handleCurrentChange(page) {
      console.log(page)
    },
    // 操作方法
    handleRow(rowData, item) {
      console.log(rowData, item);
      if (item.flag == 'add') {
        this.dialogVisible = true;
      } else if (item.flag == 'edit') {
        this.dialogVisible = true;
        this.formData = JSON.parse(JSON.stringify(rowData))
      }
      this.addEditFlag = item.flag
    },
    // 多选方法
    selectionChange(val) {
      console.log(val);
    },
    // 排序方法
    sortChange(val) {
      console.log(val);
    },
    //获取选中Btn
    getBtnEvent(flag) {
      console.log(flag)
      if (flag == 'add') {
        this.dialogVisible = true
      }
      this.addEditFlag = flag
    },
    //关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
      this.queryNOExistence();
      this.queryExistence()
    },
  }
};
</script>
<style lang="scss" scoped>
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
  